<template>
  <div>
    <div class="top">
      <van-nav-bar
        title="信息上报"
        left-text="返回"
        right-text
        left-arrow
        @click-left="() => this.$router.go(-1)"
      />
    </div>
    <div class="body">
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
      <van-form>
        <van-field v-model="form.ljnx" label="垃圾类型" @click="clickShowPicker(0)" />
        <van-field
          readonly
          clickable
          :value="form.xq"
          label="选择小区"
          placeholder="点击选择选择小区"
          @click="clickShowPicker(3)"
        />
        <!-- <van-field
          v-model="jwd"
          label="经纬度"
          right-icon="map-marked"
          @click="map=true"
          placeholder="定位经纬度"
        />-->
        <van-field label="输入预估量">
          <template #input>
            <input class="myinput" type="text" />
            <div id="select" @click="clickShowPicker(1)">
              <span id="value">{{ form.unit }}</span>
              <van-icon name="arrow-down" @click="clickShowPicker(1)" />
            </div>
          </template>
        </van-field>
        <van-field readonly clickable label="预约时间">
          <template #input>
            <div id="select" @click="time = true">
              <span :id="datetime || 'mylabel'">
                {{
                datetime || "点击预约时间"
                }}
              </span>
              <span id="value" @click.stop="clickShowPicker(2)">{{ form.datetime }}</span>
              <van-icon name="arrow-down" @click.stop="clickShowPicker(2)" />
            </div>
          </template>
        </van-field>
        <van-calendar v-model="time" @confirm="onConfirmtime" />
        <!-- <van-popup  position="bottom">
          <van-datetime-picker
            type="time"
            @confirm="onConfirm"
           
          />
        </van-popup>-->
        <van-field v-model="lxr" label="次数" placeholder="输入次数" />
        <van-field v-model="wzms" label="位置描述" placeholder="请输入位置描述" />
        <van-field label="用户地址">
          <template #input>
            <input class="myinput" type="text" />号
            <input class="myinput" type="text" />室
            <span class="min">*栋号非必填</span>
          </template>
        </van-field>
        <van-field v-model="wptt" label="发票抬头" placeholder="发票抬头" />
        <van-field v-model="sh" label="税号" placeholder="纳税人识别编号" />
        <!-- <van-field v-model="lxr" label="联系人" placeholder="联系人名称" />
        <van-field v-model="lxdh" label="联系电话" placeholder="联系人电话" />-->

        <van-field label="文件上传">
          <template #input>
            <van-uploader v-model="fileList" />
          </template>
        </van-field>
        <div class="my-van-field">
          <van-checkbox v-model="checked" shape="square" checked-color="#07c160">
            <span>
              阅读并同意
              <router-link to="/">《相关条款》</router-link>
            </span>
          </van-checkbox>
        </div>
        <div style="margin: 16px;">
          <van-button @click="sub()" block type="primary" >提交</van-button>
        </div>
      </van-form>
    </div>
    <!-- <van-popup v-model="map"  closeable  close-icon-position="top-right" position="top" :style="{ height: '100%' }" >
        <div class="map">
          <van-search
            v-model="value"
            show-action
            label="地址"
            placeholder="请输入搜索关键词"
            @search="()=>0"
            class="input"
          >
            <template #action>
              <div @click="()=>0">搜索</div>
            </template>
          </van-search>
          <div class="body">
            <baidu-map  @ready="handler" scroll-wheel-zoom  center="上海市嘉定区" :zoom="13" class="bm-view" ak="Qih4K3TfQDuBC9zU7V6z0il5OO0mwpqM">
              <bm-marker :position="center" animation="BMAP_ANIMATION_BOUNCE" @click="()=>{jwd=`${center.lng},${center.lat}`;map=false}">
              </bm-marker>  
              <bm-point-collection :points="points" shape="BMAP_POINT_SHAPE_WATERDROP" color="red" size="BMAP_POINT_SIZE_SMALL" @click="()=>0"></bm-point-collection>
            </baidu-map>
          </div>
        </div>
    </van-popup>-->
  </div>
</template>
<script>
import { BaiduMap, BmMarker, BmPointCollection } from "vue-baidu-map";
export default {
  components: {
    BaiduMap,
    BmMarker,
    BmPointCollection
  },
  data() {
    return {
      time: false,
      checked: false,
      value: "",
      datetime: "",
      datetime2: "上午",
      aickerArr: [
        [
          "餐厨垃圾",
          "装修垃圾",
          "大件垃圾",
          "粪便",
          "工业垃圾",
          "联勤暴露垃圾"
        ],
        ["袋", "桶", "件", "只", "公斤", "车"],
        ["上午", "下午"],
        ["杭州", "宁波", "温州", "嘉兴", "湖州"]
      ],
      columns: [],
      columns1: ["杭州", "宁波", "温州", "嘉兴", "湖州"],
      showPicker: false,
      falg: "",
      form: { datetime: "上午", unit: "袋", ljnx: "餐厨垃圾", xq: "" },
      jwd: "",
      wzms: "",
      wptt: "",
      sh: "",
      lxr: "",
      lxdh: "",
      fileList: [
        { url: "https://img.yzcdn.cn/vant/leaf.jpg" }
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        //{ url: "https://cloud-image", isImage: true },
      ],
      map: false,
      center: { lng: 0, lat: 0 },
      points: [
        { lng: 121.48471650499, lat: 31.234214583401 },
        { lng: 121.48178650499, lat: 31.254214583401 },
        { lng: 121.48418650499, lat: 31.235214583401 },
        { lng: 121.18478650499, lat: 31.234254583401 }
      ]
    };
  },

  methods: {
    // handler({ BMap, map }) {
    //   const that = this;
    //   var geolocation = new BMap.Geolocation();
    //   geolocation.getCurrentPosition(function(r) {
    //     if (this.getStatus() == BMAP_STATUS_SUCCESS) {
    //       that.center.lng = r.longitude;
    //       that.center.lat = r.latitude;
    //       console.log("@@@" + JSON.stringify(that.center));
    //     } else {
    //       alert("failed" + this.getStatus());
    //     }
    //   });
    // },
    clickShowPicker(falg) {
      this.showPicker = true;
      this.columns = this.aickerArr[falg];
      this.falg = falg;
    },
    onConfirm(value) {
      this.form[["ljnx", "unit", "datetime", "xq"][this.falg]] = value;
      this.showPicker = false;
    },
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirmtime(date) {
      this.time = false;
      this.datetime = this.formatDate(date);
    },
    click() {
      alert();
    },
    sub(){
      if(this.checked){
         this.$toast.success({duration:700,message:'成功提交'});
         this.$router.push({name:"Home"})
      }else{
         this.$toast.fail({duration:700,message:'请勾选条款'});
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.myinput {
  border: 0px;
  width: 30px;
  margin-left: 20px;
}
#select {
  i {
    margin-left: 10px;
  }
  #value {
    margin-left: 20px;
  }
  #mylabel {
    color: rgba($color: #969799, $alpha: 0.6);
  }
}
.pos {
  position: relative;
}
.min {
  margin-left: 20px;
  font-size: 5px;
}
.map {
  position: relative;
  top: 0px;
  left: 0px;
  .input {
    width: 90%;
    height: 8vh;
  }
  .body {
    .bm-view {
      width: 100vw;
      height: 92vh;
    }
  }
}
</style>
